<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>仿navicat项目</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/me.css" rel="stylesheet">
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close"><i class="fa fa-times-circle"></i>
            </div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                    <span class="block m-t-xs" style="font-size:20px;">
                                        <i class="fa fa-area-chart"></i>
                                        <strong class="font-bold">Navicat项目</strong>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a class="" href="?r=login/login" >
                            <i class="fa fa-home"></i>
                            <span class="nav-label">新建连接</span>
                        </a>
                    </li>
                                    <!-- 循环出所有链接 -->
<?php foreach($dbinfos_arr as $key => $val): ?>
<!-- 遮罩层代码部分  Begin-->
<div id="main">
    <div id="fullbg"></div>
    <div id="dialog">
        <p class="close"><a href="javascript:void(0);" onclick="closeBg();">关闭</a></p>
        <div style="margin-left: 10px;">
            <br>请选择你的操作<br><br>
            <a href="?r=dbs/show_db&k=<?=$key;?>" id="create_db" class="btn btn-info dropdown-toggle J_menuItem">新建数据库</a>
            <br><br>
            <button class="btn btn-danger dropdown-toggle del_dblink">删除当前连接</button>
            <br><br>
            <a href="?r=user/index&k=<?=$key;?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">用户权限</a>
        </div>
    </div>
</div>
<!-- 遮罩层代码部分  End-->
                <li>
                    <!-- 链接名位置 点这个a标签获取当前所有库名 -->
                    <a href="?r=dbs/show_db" id="show_db" class="J_menuItem" data-k="<?=$key;?>">
                        <i class="fa fa-desktop"></i>
                        <span><?= $val['0']?></span>
                        <span class="fa arrow"></span>
                    </a>
                    <ul class="nav nav-second-level show_dbname">
                        <!-- 这是库的位置 -->
                        <li>
                            <ul class="nav nav-third-level show_tablename">
                                
                            </ul>
                        </li>
                    </ul>
                </li>
            <?php endforeach;?>
            
                </ul>
                <span style="margin-left: 10px; color: yellow;">
                    提示：支持右键操作
                </span>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-info " href="#"><i class="fa fa-bars"></i> </a>
                        <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                            <div class="form-group">
                                <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
                            </a>
                            <ul class="dropdown-menu dropdown-messages">
                                <li class="m-t-xs">
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a7.jpg">
                                        </a>
                                        <div class="media-body">
                                            <small class="pull-right">46小时前</small>
                                            <strong>小四</strong> 是不是只有我死了,你们才不骂爵迹
                                            <br>
                                            <small class="text-muted">3天前 2014.11.8</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a4.jpg">
                                        </a>
                                        <div class="media-body ">
                                            <small class="pull-right text-navy">25小时前</small>
                                            <strong>二愣子</strong> 呵呵
                                            <br>
                                            <small class="text-muted">昨天</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a class="J_menuItem" href="mailbox.html">
                                            <i class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-bell"></i> <span class="label label-primary">8</span>
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="mailbox.html">
                                        <div>
                                            <i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
                                            <span class="pull-right text-muted small">4分钟前</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="profile.html">
                                        <div>
                                            <i class="fa fa-qq fa-fw"></i> 3条新回复
                                            <span class="pull-right text-muted small">12分钟钱</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a class="J_menuItem" href="notifications.html">
                                            <strong>查看所有 </strong>
                                            <i class="fa fa-angle-right"></i>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row J_mainContent" id="content-main">
                <iframe id="J_iframe" width="100%" height="100%" src="?r=index/index_v1" frameborder="0" data-id="index_v1.html" seamless></iframe>
            </div>
        </div>
        <!--右侧部分结束-->
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <!-- 自定义js -->
    <script src="js/hAdmin.js?v=4.1.0"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <!-- 第三方插件 -->
    <script src="js/plugins/pace/pace.min.js"></script>
<div style="text-align:center;"></div>
</body>
</html>
<script type="text/javascript">
    //鼠标右键事件,点击右键触发遮罩层
    window.onload = function(){
        //点击链接名,展示出所有库名
        $(document).on('mousedown','#show_db',function(e){
            var k = $(this).data("k");
            $.ajax({
                type: "post",
                url: "?r=index/dbnames",
                data: {'k':k},
                dataType: "json",
                success:function(msg){
                    var str = "";
                    for(var dbk in msg){
                        str+="<li>";
                        str+="<a class='J_menuItem' href='?r=index/tablenames&at_dbname="+msg[dbk]+"' id='show_table' data-db='"+msg[dbk]+"'>";
                        str+="<span style='color: #28ff28;'>"+msg[dbk]+"</span>";
                        str+="<span class='fa arrow'></span></a>";
                        // str+="<ul class='nav nav-third-level'>";
                        // str+="<li><a class='J_menuItem' href=''></a></li></ul>";
                        str+="</li>";
                    };
                    $('.show_dbname').empty().append(str);
                }
            });
        });

        //点击库名,展示出所有表名
        // $(document).on('mousedown','#show_table',function(e){
        //     var at_dbname = $(this).data("db"); //当前数据库名称
        //     $.ajax({
        //         type: "post",
        //         url: "?r=index/tablenames",
        //         data: {'at_dbname':at_dbname},
        //         dataType: "json",
        //         success:function(msg){
        //             var str = "";
        //             for(var tablek in msg){
        //                 str+="<li><a class='J_menuItem' href=''>'"+msg[tablek]+"'</a></li>";
        //             };
        //             $('.show_tablename').empty().append(str);
        //         }
        //     });
        // });

        //去掉默认的contextmenu事件，否则会和右键事件同时出现。
        document.oncontextmenu = function(e){
            e.preventDefault();
        };
        $(document).on('mousedown','a[data-k]',function(e){
            _this = $(this);
            if(e.button == 2){
                var k = $(this).data("k");
                //显示遮罩层
                var bh = $("body").height();
                var bw = $("body").width();
                $('#create_db').attr('href','?r=dbs/show_db&k='+k);
                $('#user-index').attr('href','?r=user/index&k='+k);
                $("#fullbg").css({
                    height:bh,
                    width:bw,
                    display:"block"
                });
                $("#dialog").show();
                //删除一个链接
                $(".del_dblink").click(function(){
                        $.ajax({
                            type: "post",
                            url: "?r=dbs/del_link",
                            data: {'k':k},
                            dataType: "json",
                            success:function(msg){
                                if(msg === '1'){
                                    _this.remove();
                                    $("#fullbg,#dialog").hide();
                                }
                            }
                        });
                });
            }
        });
    }

    //点击创建数据库,同时将遮罩层关闭
    $("#create_db").click(function(){
        $("#fullbg,#dialog").hide();
    });
    $("#user-index").click(function(){
        $("#fullbg,#dialog").hide();
    });

    //关闭灰色 jQuery 遮罩
    function closeBg(){
        $("#fullbg,#dialog").hide();
    }

    
</script>